<template>
  <div class="mainprocess">
    <div class="itemcontent" v-for="(item,index) in projectData">
      <div class="step">
        <template>
          <img src="../../../assets/third/stepselect.png" />
          <div class="line" v-show="index<(projectData.length-1)"></div>
        </template>
        <!-- <template>
          <img src="../../../assets/third/stepnoselect.png" />
          <div class="noline" v-show="index<(projectData.length-1)"></div>
        </template> -->
      </div>
      <div class="reviewContent">
        <div class="comtentbox">
          <div class="header">
            <div class="title">{{item.name}}</div>
            <div class="content">
              <img v-if="item.status === 0" src="../../../assets/third/reviewthrough.png" />
              <img v-else src="../../../assets/third/reviewthrough-1.png" />
              审查{{item.status === 0 ? "通过" : "不通过"}}
              <span>审查人：</span>
              <img style="width: 100px; height: 45px;" :src="`${baseUrl}${item.signature}`" alt />
              <span>{{item.createTime}}</span>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div class="opinionbox">
            <div class="box">
              <span>经办意见：</span>
              {{item.opinion}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getExamineOpinion,
  getExumlist
} from "@/api/feasibilityStudy/countyReviewOpinions.js";
import config from "@/config/index.js";
export default {
  props: {
    processData: {}
  },
  data() {
    return {
      projectData: [],
      baseUrl: config.baseUrlImg,
      exumlist: []
    };
  },

  created() {
    this.getExumlist();
  },
  methods: {
    getExamineOpinion() {
      //获取审查流程列表
      getExamineOpinion(this.processData)
        .then(res => {
          let data = res.data;
          //取得当前审查流程类型
          data.map(item => {
            this.exumlist.forEach(a => {
              if (a.groupId === item.groupId && a.type === item.type) {
                item.name = a.name
              }
            });
            return item;
          });
          this.projectData = data;
        })
        .catch(res => {
        });
    },
    getExumlist() {
      //获取流程类型列表
      getExumlist()
        .then(res => {
          this.exumlist = res.data;
          this.getExamineOpinion();
        })
        .catch(res => {
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.mainprocess {
  padding: 30px 40px;
  .itemcontent {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    .step {
      width: 24px;
      img {
        width: 24px;
        height: 24px;
        display: block;
      }
      .line {
        width: 2px;
        height: 106px;
        background: #fba330;
        margin: auto;
      }
      .noline {
        width: 2px;
        height: 106px;
        background: #ccc9c6;
        margin: auto;
      }
    }
    .reviewContent {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      margin-left: 20px;
      .comtentbox {
        width: 100%;
        max-width: 980px;
        height: 130px;
        box-sizing: border-box;
        padding-top: 2px;
        .header {
          .title {
            float: left;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 20px;
            color: #4d4d4d;
          }
          .content {
            float: right;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 20px;
            color: #4d4d4d;
            img {
              width: 16px;
              height: 16px;
              margin-right: 8px;
            }
            span {
              color: #a6a6a6;
              margin-left: 30px;
            }
          }
        }
        .opinionbox {
          margin-top: 10px;
          background: #f3f4f5;
          padding: 16px 16px 20px;
          border-radius: 2px;
          .box {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 20px;
            color: #4d4d4d;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            max-height: 60px;
            overflow: hidden;
            span {
              color: #a6a6a6;
            }
          }
        }
      }
    }
  }
}
</style>
 